import React, {
  Component
} from 'react'
import {
  StyleSheet,
  View,
  ListView,
  Image,
  Dimensions,
  Text,
  Platform,
  TouchableOpacity
} from 'react-native'

import {Icon} from '../../components/common/icon'
import NavigationBar from '../../components/common/NavigationBar'
import FamilyInfo from '../Mine/FamilyInfo'
import PersonalInfo from '../Mine/PersonalInfo'
import ScenceList from '../ScenceList'
import SmartSocket from '../Devices/SmartSocket'
import BoxShadowYaGuan from '../../components/common/BoxShadowYaGuan'
import HouseInfo from '../Devices/NightLight'

const { width, height } = Dimensions.get('window')

class Mine extends Component {
  constructor(props) {
    super(props)
    // 初始状态
    this.state = {
      list: [{
        label: '家庭及成员管理',
        icon: 'icon_jiating',
        component: FamilyInfo
      }, {
        label: '场景管理',
        icon: 'icon_changjing',
        component: ScenceList
      }, {
        label: '设备管理',
        icon: 'icon_shebei',
        component: SmartSocket
      }, {
        label: '5890平台',
        icon: 'icon_',
        component: FamilyInfo
      }, {
        label: '能耗记录',
        icon: 'icon_nenghao',
        component: FamilyInfo
      }, {
        label: '消息',
        icon: 'icon_xiaoxi',
        component: HouseInfo
      }, {
        label: '意见反馈',
        icon: 'icon_yijian',
        component: FamilyInfo
      }, {
        label: '设置',
        icon: 'icon_shezhi',
        component: FamilyInfo
      }],
      count: 0
    }
    this.dataSource = new ListView.DataSource({
      rowHasChanged: ((row1, row2) => row1 !== row2)
    })
    this._renderSeparator = this._renderSeparator.bind(this)
    this._renderRow = this._renderRow.bind(this)
  }
  render() {
    return (
      <View style = {styles.container}>
        <Image source={require('../../img/bg_head.png')} style={styles.bgHead} />
        <NavigationBar
          title={'我的'}
          titleColor={'#ffffff'}
          leftButtonHide={true}
          statusBar={{backgroundColor: '#2AB8C4', barStyle: 'light-content'}}
        />
        <TouchableOpacity onPress = {this._onPressCard.bind(this)} >
          <View style = {styles.card}>
            <BoxShadowYaGuan
              width={width - 30}
              height={98}
              color={'#2BB8C1'}
              renderItem={()=>{
                return (
                  <View style={styles.cardShadow}>
                    <Image source = {require('../../img/camera.png')} style = {styles.avator} />
                    <View style = {styles.user}>
                      <Text style = {styles.name}>我是周杰伦</Text>
                      <Text style = {styles.phone}>13967514521</Text>
                    </View>
                    <Icon name="icon_jiantou" size={16} color="#333333" style={styles.arrow} />
                  </View>
                )
              }}
            />
          </View>
        </TouchableOpacity>
        <ListView style = {styles.list}
          dataSource = {this.dataSource.cloneWithRows(this.state.list)}
          renderRow = {this._renderRow}
          renderSeparator = {this._renderSeparator}
          showsVerticalScrollIndicator = {false}
        />
      </View>
    )
  }
  // 返回一个Item
  _renderRow(rowData) {
    return (
      <TouchableOpacity onPress = {this._onPressButton.bind(this, rowData)} >
        <View style = {styles.item}>
          <Icon name={rowData.icon} size={24} color="#333333" style = {styles.itemIcon} />
          <Text style = {styles.itemText}> {rowData.label} </Text>
          <Icon name="icon_jiantou" size={16} color="#333333" />
        </View>
      </TouchableOpacity>
    )
  }
  _renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
    if(rowID == 5){
      return (
        <View style={styles.line}>
          <View style={styles.lineText}></View>
        </View>
      )
    }
  }
  _onPressCard() {
    this.props.navigator.push({
      component: PersonalInfo,
      params: {
        navigator: this.props.navigator
      }
    })
  }
  _onPressButton(rowData) {
    this.props.navigator.push({
      component: rowData.component,
      params: {
        navigator: this.props.navigator
      }
    })
  }
}

export default Mine

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F4F4F4'
  },
  bgHead: {
    width: width,
    position: 'absolute',
    top: Platform.OS === 'ios' ? 0 : -20,
    left: 0,
  },
  title: {
    fontSize: 16,
    textAlign: 'center',
    color: '#ffffff',
    marginBottom: 30,
    marginTop: 15,
  },
  card: {
    height: 108,
    margin: 15,
    marginBottom: 5,
    borderRadius: 6,
  },
  cardShadow: {
    width: width - 30,
    height: 98,
    backgroundColor: '#ffffff',
    borderRadius: 6,
    flexDirection: 'row',
    alignItems: 'center',
  },
  avator: {
    width: 54,
    height: 54,
    borderRadius: 27,
    marginLeft: 28,
    marginRight: 10,
  },
  user: {
    flex: 1,
  },
  name: {
    color: '#333333',
    fontSize: 14,
  },
  phone: {
    marginTop: 5,
    color: '#999999',
    fontSize: 11,
  },
  arrow: {
    marginRight: 10,
  },
  list: {
    backgroundColor: '#f9f9f9',
    flex: 1,
    marginBottom: 20,
  },
  item: {
    height: 52,
    backgroundColor: '#f9f9f9',
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 10,
    paddingRight: 10,
  },
  itemIcon: {
    marginLeft: 10,
    marginRight: 10,
  },
  itemText: {
    flex: 1,
    fontSize: 14,
    color: '#333333',
  },
  line: {
    height: 10,
    paddingBottom: 23,
    paddingTop: 13,
    backgroundColor: '#f9f9f9',
  },
  lineText: {
    height: 10,
    backgroundColor: '#F0F0F0',
  },
})
